<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>飞牛影视 - 搜索</title>
  <link rel="stylesheet" href="css/styles.css">
  <link rel="stylesheet" href="css/utilities.css">
  <link rel="stylesheet" href="css/remixicon.min.css">
</head>
<body class="theme-dark">
  <div class="app-container">
    <!-- 侧边栏 -->
    <aside class="sidebar" id="sidebar">
     
    </aside>

    <!-- 移动端侧边栏遮罩 -->
    <div class="sidebar-overlay" id="sidebarOverlay"></div>

    <!-- 主内容区 -->
    <main class="main-content">
      <!-- 顶部导航栏 -->
      <header class="header" id="header">
       
      </header>

      <!-- 页面内容 -->
      <div class="page-content">
        <section class="section">
          <div class="search-header">
            <h1 class="page-title">搜索结果: <span id="searchQuery"></span></h1>
            <p class="search-info">找到 <span id="resultCount">0</span> 个结果</p>
          </div>

          <!-- 媒体列表 -->
          <div class="media-grid infinite-scroll" id="searchResults">
            <!-- 加载中状态 -->
            <div class="media-loading-grid">
              <div class="media-skeleton"></div>
              <div class="media-skeleton"></div>
              <div class="media-skeleton"></div>
              <div class="media-skeleton"></div>
              <div class="media-skeleton"></div>
              <div class="media-skeleton"></div>
              <div class="media-skeleton"></div>
              <div class="media-skeleton"></div>
              <div class="media-skeleton"></div>
              <div class="media-skeleton"></div>
              <div class="media-skeleton"></div>
              <div class="media-skeleton"></div>
            </div>
          </div>

          <!-- 加载更多指示器 -->
          <div class="loading-more" id="loadingMore" style="display: none;">
            <div class="spinner"></div>
            <span>加载更多...</span>
          </div>

          <!-- 无结果提示 -->
          <div class="no-results" id="noResults" style="display: none;">
            <i class="ri-search-line"></i>
            <h2>未找到相关内容</h2>
            <p>请尝试其他关键词或检查拼写</p>
          </div>
        </section>
      </div>
    </main>

    <!-- 源切换对话框 -->
    <div class="modal" id="sourceModal">
      <div class="modal-content">
        <div class="modal-header">
          <h2>切换媒体源</h2>
          <button class="btn-icon modal-close" id="closeSourceModal">
            <i class="ri-close-line"></i>
          </button>
        </div>
        <div class="modal-body">
          <div class="source-list" id="sourceList">
            <!-- 源列表将通过JS动态生成 -->
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-outline" id="cancelSourceModal">取消</button>
          <button class="btn btn-primary" id="addSourceBtn">添加源</button>
        </div>
      </div>
    </div>

    <!-- 添加源对话框 -->
    <div class="modal" id="addSourceModal">
      <div class="modal-content">
        <div class="modal-header">
          <h2>添加媒体源</h2>
          <button class="btn-icon modal-close" id="closeAddSourceModal">
            <i class="ri-close-line"></i>
          </button>
        </div>
        <div class="modal-body">
          <form id="addSourceForm">
            <div class="form-group">
              <label for="sourceName">名称</label>
              <input type="text" id="sourceName" placeholder="媒体库名称" required>
            </div>
            <div class="form-group">
              <label for="sourceUrl">网站地址</label>
              <input type="url" id="sourceUrl" placeholder="https://example.com" required>
            </div>
            <div class="form-group">
              <label for="sourceApi">API地址</label>
              <input type="url" id="sourceApi" placeholder="https://api.example.com" required>
            </div>
            <div class="form-group">
              <label for="sourceProxy">代理地址 (可选)</label>
              <input type="url" id="sourceProxy" placeholder="https://proxy.example.com">
            </div>
            <div class="form-group">
              <label for="sourceType">类型</label>
              <select id="sourceType" required>
                <option value="movie">电影</option>
                <option value="tv">电视剧</option>
                <option value="anime">动漫</option>
                <option value="variety">综艺</option>
                <option value="other">其他</option>
                <option value="adult">18+</option>
              </select>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button class="btn btn-outline" id="cancelAddSource">取消</button>
          <button class="btn btn-primary" id="saveSourceBtn">保存</button>
        </div>
      </div>
    </div>

    <!-- 主题选择对话框 -->
    <div class="modal" id="themeModal">
      <div class="modal-content">
        <div class="modal-header">
          <h2>选择主题</h2>
          <button class="btn-icon modal-close" id="closeThemeModal">
            <i class="ri-close-line"></i>
          </button>
        </div>
        <div class="modal-body">
          <div class="theme-grid">
            <button class="theme-option" data-theme="light">
              <div class="theme-preview light-preview"></div>
              <span>浅色</span>
            </button>
            <button class="theme-option" data-theme="dark">
              <div class="theme-preview dark-preview"></div>
              <span>深色</span>
            </button>
            <button class="theme-option" data-theme="blue">
              <div class="theme-preview blue-preview"></div>
              <span>蓝色</span>
            </button>
            <button class="theme-option" data-theme="green">
              <div class="theme-preview green-preview"></div>
              <span>绿色</span>
            </button>
            <button class="theme-option" data-theme="purple">
              <div class="theme-preview purple-preview"></div>
              <span>紫色</span>
            </button>
            <button class="theme-option" data-theme="orange">
              <div class="theme-preview orange-preview"></div>
              <span>橙色</span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 脚本 -->
  <script src="js/config.js"></script>
  <script src="js/api.js"></script>
  <script src="js/ui.js"></script>
  <script src="js/search.js"></script>
</body>
</html>
